<template>
	<view class="container">
		<template v-if="taskInfo">
			<!-- 使用抽取的组件来显示核心任务信息 -->
			<task-info-display :taskInfo="taskInfo">
				<template v-slot:actions>
					<view class="right-section">
						<view class="action-menu-btn" @click="showActionMenu">
							<text class="dot">·</text>
							<text class="dot">·</text>
							<text class="dot">·</text>
						</view>
					</view>
				</template>
			</task-info-display>

			<!-- 报名用户列表 -->
			<view class="applicants-section">
				<view class="section-title">报名列表 ({{ applicants.length }}/{{ taskInfo.maxApplyCount || 1 }})</view>
				<view class="applicants-list" v-if="applicants.length > 0">
					<view v-for="applicant in applicants" :key="applicant.userId" class="applicant-item" @click="viewApplicantProfile(applicant.userId)">
						<image class="applicant-avatar" :src="getApplicantAvatar(applicant.avatar)" mode="aspectFill"></image>
						<text class="applicant-nickname">{{ applicant.nickName }}</text>
					</view>
				</view>
				<view class="empty-applicants" v-else>
					还没有人报名哦
				</view>
			</view>
			


		</template>
		<template v-else>
			<view class="loading-tip">
				<text>加载中...</text>
			</view>
		</template>
	</view>
</template>

<script>
	import { getTaskInfo, deleteTask } from '@/api/task.js';
	import { mapGetters } from 'vuex';
	import taskInfoDisplay from '@/components/task-info-display/task-info-display.vue';
	import config from '@/config/config.js';

	export default {
		components: {
			taskInfoDisplay
		},
		data() {
			return {
				taskId: null,
				taskInfo: null,
				applicants: [],
			};
		},
		computed: {
			...mapGetters('user', ['userInfo', 'isLogin'])
		},
		onLoad(options) {
			if (options.taskId) {
				this.taskId = options.taskId;
				this.getTaskDetailForManage();
			} else {
				uni.showToast({ title: '参数错误', icon: 'none' });
				uni.navigateBack();
			}
		},
		methods: {
			async getTaskDetailForManage() {
				uni.showLoading({ title: '加载中...', mask: true });
				try {
					const res = await getTaskInfo(this.taskId);
					if (res.code === 200) {
						const data = res.data;
						this.taskInfo = data.taskInfo || data;

						// 权限校验：必须是发布者才能查看
						if (!this.userInfo || this.taskInfo.createBy != this.userInfo.userId) {
							uni.showToast({ title: '无权访问', icon: 'error' });
							setTimeout(() => uni.navigateBack(), 1500);
							return;
						}

						if (this.taskInfo.applicants) {
							this.applicants = this.taskInfo.applicants;
						}
					} else {
						uni.showToast({ title: res.msg || '加载失败', icon: 'none' });
					}
				} catch (error) {
					uni.showToast({ title: '获取任务详情失败', icon: 'none' });
				} finally {
					uni.hideLoading();
				}
			},
			getApplicantAvatar(avatar) {
				if (!avatar) return '/static/default-avatar.png';
				if (avatar.startsWith('http')) return avatar;
				return config.baseUrl + config.apiPrefix + avatar;
			},
			showActionMenu() {
				uni.showActionSheet({
					itemList: ['编辑', '分享', '删除'],
					success: (res) => {
						if (res.tapIndex === 0) {
							this.editTask();
						} else if (res.tapIndex === 1) {
							uni.showToast({ title: '分享功能待实现', icon: 'none' });
						} else if (res.tapIndex === 2) {
							this.handleDelete();
						}
					}
				});
			},
			editTask() {
				// 跳转到编辑页面，带上taskId参数，进入编辑模式
				uni.navigateTo({
					url: `/pages/task-manage/task-edit?taskId=${this.taskId}`
				});
			},
			handleDelete() {
				uni.showModal({
					title: '确认删除',
					content: '您确定要删除这个任务吗？此操作无法撤销。',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({ title: '删除中...', mask: true });
							try {
								const response = await deleteTask(this.taskId);
								if (response.code === 200) {
									uni.showToast({ title: '删除成功', icon: 'success' });
									setTimeout(() => {
										uni.switchTab({ url: '/pages/tabbar/user/user' });
									}, 1500);
								} else {
									uni.showToast({ title: response.msg || '删除失败', icon: 'none' });
								}
							} catch (error) {
								uni.showToast({ title: '删除操作失败', icon: 'none' });
							} finally {
								uni.hideLoading();
							}
						}
					}
				});
			},
			markAsCompleted() {
				uni.showToast({ title: '标记完成功能待实现', icon: 'none' });
			},
			viewApplicantProfile(userId){
				uni.showToast({ title: `查看用户 ${userId} 的主页功能待实现`, icon: 'none' });
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f8f8f8;
		padding-bottom: 50rpx;
	}
	.right-section {
		display: flex;
		align-items: center;
		.action-menu-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			height: 60rpx;
			.dot {
				font-size: 12px;
				font-weight: bold;
				line-height: 1;
				margin: 0 -2px;
			}
		}
	}
	.applicants-section {
		padding: 20rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;
			border-bottom: 1px solid #f0f0f0;
		}
		.applicants-list {
			display: flex;
			flex-wrap: wrap;
		}
		.applicant-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 30rpx;
			margin-bottom: 20rpx;
			width: 120rpx;
			cursor: pointer;
		}
		.applicant-avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-bottom: 10rpx;
		}
		.applicant-nickname {
			font-size: 24rpx;
			color: #666;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 100%;
		}
		.empty-applicants {
			text-align: center;
			color: #999;
			padding: 40rpx 0;
			font-size: 26rpx;
		}
	}
	.manage-actions {
		margin-top: 40rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-around;
		.action-btn {
			flex: 1;
			margin: 0 15rpx;
			&.delete {
				background-color: #f56c6c;
				color: white;
			}
			&.complete {
				background-color: #67c23a;
				color: white;
			}
		}
	}
	.loading-tip {
		text-align: center;
		padding: 50rpx;
		color: #999;
	}
	.comment-section {
		padding: 20rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}
	.comment-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}
	.comment-list {
		.comment-item {
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #f0f0f0;
			&:last-child { border-bottom: none; }
		}
		.comment-user {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
		}
		.user-avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}
		.user-info {
			display: flex;
			flex-direction: column;
		}
		.user-name {
			font-size: 28rpx;
			color: #333;
		}
		.comment-time {
			font-size: 22rpx;
			color: #999;
		}
		.comment-content {
			font-size: 28rpx;
			color: #444;
			padding-left: 75rpx;
		}
	}
	.empty-comment {
		text-align: center;
		color: #999;
		padding: 40rpx 0;
		font-size: 26rpx;
	}
</style> 